body{
  font-family: 'Ubuntu', sans-serif !important;
}
h1{
  font-family: 'Playfair Display', serif !important;
}
/* class */
.nav-item a {
  font-size: 18px;
  color: black;
}

.nav-item a:hover {
  color: black;
}
.nav-item {
 list-style: none;
}
.navbar-fixed-top, .navbar-fixed-bottom {
  position: fixed !important;
  left: 0;
  right: 0;
  z-index: 999;
}
.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.slogan {
  font-size: 2em !important ;
  font-weight: 700 !important ;
  letter-spacing: 2px;
  padding: 150px 250px;
}
.bg-overlay {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(236,236,236, .6);
}
.hero-content-wrapper {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.hero-content {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
.hero-lead {
  font-size: 4em;
  font-weight: 700;
  letter-spacing: 2px;
}
.hero-lead span:first-child {
  font-size: 1.5em;
}
.navbar {
  background: rgb(248,249,250);
}
.navbar-trans {
  border-bottom: none;
  background: transparent;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  position: fixed;
  left: 0;
  transition: background .3s ease,height .4s ease;
  width: 100%;
  z-index: 29;
}
.navbar-trans nav {
  width: 100%;
  transform: translateZ(0);
  z-index: 29;
}
.card{
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.card-img-top{
  display: flex;
  align-items: center;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden
}
.card-img-top img {
  width: 100%;
  height: 185px;
}
.card-body{
  width: 100%;
  height: 90px;
}
.w-auto{
  width: auto !important;
}
.btn {
  border: 3px solid rgba(183, 199, 223, 0.4) !important;
  background-color: rgba(183, 199, 223, 0.4) !important;
  color: rgb(44, 79, 135) !important;
}
.btn:hover {
  background-color: rgba(44, 79, 135) !important;
  color: rgba(183, 199, 223) !important;
}
.btn::placeholder {
  color: rgb(115, 149, 201) !important;
}
.title{
  color: rgba(183, 199, 223) !important;
  background-color: rgb(44, 79, 135) !important;
}
.stem{
  background-color: rgba(183, 199, 223) !important;
  color: rgb(44, 79, 135) !important
}
.stem::placeholder{
  color: rgb(44, 79, 135) !important
}
.box{
  background-color: white !important;
}
.iframe-fluid {
  width: 100%;
  height: 300px;
}
.p2-e {
  padding-right: 64px !important;
}
.navbar-expand-lg .navbar-collapse {
  justify-content: flex-end;
}
.navbar-light .navbar-toggler {
  color: rgba(0,0,0,.55) !important;
  border-color: rgba(0,0,0,.6) !important;
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 0.1rem;
}
.p2-b {
  padding-bottom: 64px !important;
}
.p2-t {
  padding-top: 64px !important;
}
/*id*/
#navbar{
  display: flex;
  justify-content: center;
}

#home {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(/assets/images/main.jpg);
  background-size: cover;
  background-attachment: fixed;
}
#footer {
  background-color:rgba(183, 199, 223, 0.4);
}
#spec{
  padding-top: 64px;
}
#slider {
  padding-left: 128px;
  padding-right: 128px;
  padding-top: 64px;
}
#iletisim{
  padding-top: 64px;
}
#iframe-container {
  padding-right: 32px;
}
#hesaplamalar{
  padding-top: 64px;
}
/* media */
@media only screen and (max-width: 1200px) {
  .p2-e {
    padding-right: 32px !important;
  }
}
@media only screen and (max-width: 992px) {
  .p2-e {
    padding-right: 16px !important;
  }
  #email-form input {
    width: 160px;
  }
  .hero-lead {
    font-size: 2.5em;
  }
  .nav-item a {
    font-size: 17px !important;
  }
  #slider {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 64px;
  }
  #iframe-container {
    padding-right: 12px;
  }
  #iletisim-container {
    padding-top: 64px;
  }
}
@media only screen and (max-width: 768px) {
  footer div {
    margin-bottom: 32px;
  }
  footer div:first-child {
    display: flex;
    justify-content: center;
  }
  .hero-lead {
    font-size: 2em;
  }
  .navbar-nav .nav-item a {
    font-size: 17px !important;
    padding: 0.25rem 0rem !important;
  }
}
@media only screen and (max-width: 576px) {
  footer div {
    margin-bottom: 32px;
  }
  footer div:first-child {
    display: flex;
    justify-content: center;
  }
}
@media only screen and (max-width: 450px) {
  .hero-lead {
    padding-top: 3rem;
  }
  .p2-b {
    padding-bottom: 32px !important;
  }
  .p2-t {
    padding-top: 32px !important;
  }
}
@media only screen and (max-width: 400px) {
  .hero-lead {
    font-size: 1.5em;
  }
  h5 {
    font-size: 1rem;
  }
  p {
    font-size: 15px;
  }
  .nav-item a {
    font-size: 15px !important;
  }
  footer div {
    margin-bottom: 16px;
  }
}